<script lang="ts" setup>
import { ref, toRaw } from 'vue'
interface Props {
  id?: number,
  areaInit?: {}
}

const props = defineProps<Props>()
const areaInit: any = ref(toRaw(props.areaInit))
const areaIdx = ref(props.id)

const shapeDown = (e: any) => {
    let startClientX = e.clientX
    let startClientY = e.clientY
    if (!document.onmousemove) {
        const initX = areaInit.value.width
        const initY = areaInit.value.height
        document.onmousemove = (ev) => {
            areaInit.value.width = initX + ev.clientX - startClientX
            areaInit.value.height = initY + ev.clientY - startClientY
        }
    }
}
const mouseUp = (ev: any) => {
    document.onmousemove = null
}
const mouseDown = (e: any) => {
    let startClientX = e.clientX
    let startClientY = e.clientY
    if (!document.onmousemove) {
    const initX = areaInit.value.left
    const initY = areaInit.value.top
    document.onmousemove = (ev) => {
        areaInit.value.left = initX + ev.clientX - startClientX
        areaInit.value.top = initY + ev.clientY - startClientY
    }
    }
}
</script>

<template>
    <div class="area-box"
        :style="{width: areaInit.width+'px',height: areaInit.height+'px',left: areaInit.left+'px',top: areaInit.top+'px'}"
        @mousedown.left.stop="mouseDown($event)"
        @mouseup.left.stop="mouseUp($event)">
        <div class="area-content">热区{{ areaIdx + 1 }}</div>
        <div class="del"></div>
        <div class="shape"
            @mousedown.left.stop="shapeDown($event)"
            @mouseup.left.stop="mouseUp($event)"></div>
    </div>
</template>
<style>
.area-box {
    position: absolute;
    background: rgba(255,192,203, 0.3);
    border: 1px solid #FFC0CB;
}
.area-content {
    font-size: 12px;

}
.del {
    width: 10px;
    height: 10px;
    background: #EEE;
    border-radius: 10px;
    position: absolute;
    right: -5px;
    top: -5px;
}
.shape {
    width: 10px;
    height: 10px;
    /* background: #FFC0CB; */
    position: absolute;
    right: -5px;
    bottom: -5px;
    cursor: nwse-resize;
}
</style>
